<template>
	<view class="invoiceApplyBox">
		<uv-navbar title="发票申请" @leftClick="goBack" bgColor="#277CC0" :placeholder="true"
			titleStyle="color:#FFFFFF;fontWeight:500" leftIconColor="#FFFFFF"></uv-navbar>
		<view class="contentBox">
			<view class="titleText">
				发票类型
			</view>
			<view class="typeBox">
				<view :class="['typeItem',typeFlag==index?'typeActive':'']" v-for="(i,index) of invoiceType"
					:key="index" @click="checkType(index)">
					{{i.name}}
				</view>
			</view>
			<view class="titleText">
				发票/抬头
			</view>
			<view class="typeBox">
				<view :class="['typeItem',titleFlag==index?'typeActive':'']" v-for="(i,index) of titleType" :key="index"
					@click="checkTitle(index)" style="width: 116rpx;">
					{{i.name}}
				</view>
			</view>
			<view class="formBox">
				<uv-form labelPosition="left" :model="invoiceModel" :rules="invoiceRules" ref="invoiceModel" >
					<uv-form-item label="抬头名称" prop="header_name" borderBottom labelWidth="140rpx">
						<uv-input v-model="invoiceModel.header_name" border="none" placeholder="抬头名称">
						</uv-input>
					</uv-form-item>
					<uv-form-item v-if="typeFlag==1" label="纳税人识别号" prop="tax_no" borderBottom labelWidth="200rpx">
						<uv-input v-model="invoiceModel.tax_no" border="none" placeholder="纳税人识别号">
						</uv-input>
					</uv-form-item>
					<uv-form-item label="发票内容" v-if="typeFlag==1" borderBottom labelWidth="140rpx">
						<uv-input v-model="invoiceModel.content" border="none" placeholder="发票内容 (选填)">
						</uv-input>
					</uv-form-item>
                    <uv-form-item label="手机号"   labelWidth="120rpx">
                    	<uv-input v-model="invoiceModel.mobile" border="none" placeholder="手机号">
                    	</uv-input>
                    </uv-form-item>
					<uv-form-item label="电子邮箱"   labelWidth="140rpx">
						<uv-input v-model="invoiceModel.email" border="none" placeholder="电子邮箱">
						</uv-input>
					</uv-form-item>
					
					<uv-form-item label="备注" v-if="typeFlag==1"  >
						<uv-input v-model="invoiceModel.notes" border="none" placeholder="备注">
						</uv-input>
					</uv-form-item>
				</uv-form>
			</view>
		</view>
		<view class="totalMonetBox">
			
			<view class="allMoney">
				总金额：<text>{{invoiceModel.amount}}元</text>
			</view>
			<view class="next_btn" @click="onsubmit">
				立即提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleFlag: 0,
				typeFlag: 0,
				invoiceType: [{
						name: '增值税普通发票'
					},
					{
						name: '增值税专用发票'
					}
				],
				titleType: [{
						name: "个人",
						value:"person",
					},
					{
						name: "企业",
						value:"company",
					}
				],
				invoiceModel:{
					email:"",
					notes:"",
					order_id:"",
					amount:"0",
					mobile:"",
					type:"person",
					header_name:"",
					tax_no:"",
					category:"1",
                    content:""
					
				},
				invoiceRules:{},
                allMoney:0
			};
		},
        onLoad(opt) {
            this.invoiceModel.order_id=opt.id
            this.invoiceModel.amount = opt.money
        },
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			//发票类型切换
			checkType(val) {
				this.typeFlag = val
				this.invoiceModel.category=val+1
			},
			//发票抬头切换
			checkTitle(val) {
				this.titleFlag = val
				this.invoiceModel.type=this.titleType[val].value
				
			},
			async  onsubmit(){
            if(!this.invoiceModel.header_name) return this.$utils.msg('请输入抬头名称')
            if(!this.$utils.checkStr(this.invoiceModel.mobile ,'mobile')) return  this.$utils.msg('请输入正确的手机号')
            if(!this.$utils.checkStr(this.invoiceModel.email ,'email')) return  this.$utils.msg('请输入正确的邮箱')
            
			const res = await this.$api.addinvoice(this.invoiceModel)
				if(res.code==1){
				    this.$utils.msg('操作成功')
				    setTimeout(()=>{
				        uni.navigateBack()
				    },800)
				}else{
				    this.$utils.msg(res.msg)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invoiceApplyBox {
		min-height: 100vh;
		background-color: RGBA(245, 245, 245, 1);
        position: relative;
		.contentBox {
			padding-left: 23rpx;
			background-color: #FFFFFF;
			overflow: hidden;

			.titleText {
				color: #222222;
				font-size: 30rpx;
				margin-top: 36rpx;
				margin-bottom: 24rpx;
                text-align: left;
                font-weight: 500;
			}

			.typeBox {
				display: flex;
				font-size: 24rpx;
				margin-bottom: 38rpx;

				.typeItem {
					width: 218rpx;
					height: 53rpx;
					text-align: center;
					line-height: 53rpx;
					border: 1px solid rgba(118, 118, 118, 1);
					margin-right: 19rpx;
					color: #222222;
				}

				.typeActive {
					border: 1px solid rgba(39, 124, 192, 1);
					color: rgba(39, 124, 192, 1);
				}
			}
		}
		.totalMonetBox {
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			z-index: 999;
			width: 750rpx;
			height: 141rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 26rpx;
			.allMoney{
				color:#7C7C7C;
				font-size: 22rpx;
				text{
					font-size: 30rpx;
					color:#D72031;
				}
			}
			.next_btn{
				width: 208rpx;
				height: 54rpx;
				background: #277CC0;
				border-radius: 6rpx;
				margin-left: 63rpx;
				margin-right: 15rpx;
				line-height: 54rpx;
				text-align: center;
				color:#FFFFFF;
				font-size: 24rpx;
			}
		}
	}
</style>